<template>
  <!-- 换肤 -->
  <div class="changeColor font-24">
    主题色：<el-color-picker
      class="mr-50"
      @change="changeCustom($event, 'primary')"
      v-model="primary"
    />
    成功色：<el-color-picker
      class="mr-50"
      @change="changeCustom($event, 'success')"
      v-model="success"
    />
    失败色：<el-color-picker
      class="mr-50"
      @change="changeCustom($event, 'danger')"
      v-model="danger"
    />
    警告色<el-color-picker
      class="mr-50"
      @change="changeCustom($event, 'warning')"
      v-model="warning"
    />
    信息色<el-color-picker
      class="mr-50"
      @change="changeCustom($event, 'info')"
      v-model="info"
    />
    <el-button @click="resetTheme" type="primary">恢复默认主题</el-button>
    <!-- 预览更换后的效果 -->
    <preview />
  </div>
</template>

<script>
import { mapState } from "vuex";
import preview from "./preview";
export default {
  name: "Theme",
  components: {
    preview
  },
  computed: {
    ...mapState({
      themeList: state => state.theme.themeList
    })
  },
  data() {
    return {
      primary: "",
      success: "",
      danger: "",
      warning: "",
      info: ""
    };
  },
  watch: {
    themeList: {
      immediate: true,
      deep: true,
      handler: "initThemeList"
    }
  },
  methods: {
    // 处理拿到的themeList
    initThemeList(val) {
      val.forEach(item => {
        this[item.type] = item.theme;
      });
    },
    // 修改自定义颜色
    changeCustom(val, type) {
      const option = {
        val,
        type
      };
      this.$store.commit("theme/THEME_CHANGE", [option]);
    },
    // 恢复默认主题
    resetTheme() {
      this.$store.commit("theme/THEME_RESET");
    }
  }
};
</script>
